// 测试用的 iconfont，可生效
// @import './iconfont.css';

.test {
  // 可以通过 @apply 多个样式封装整体样式
  @apply mt-4 ml-4;

  padding-top: 4px;
  color: red;
}

:root,
page {
  // 修改按主题色
  // --wot-color-theme: #37c2bc;

  // 修改按钮背景色
  // --wot-button-primary-bg-color: green;
  font-family: Source Han Sans CN;
}

.flex {
	display: flex;
}

.f-i-c {
	display: flex;
	align-items: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

.collapse-box {
	padding: 20px;
	.wot-theme-light {
		& + .wot-theme-light {
			margin-top: 20px;
		}
	}
	.collapse-item {
		// padding: 13px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0px 5px 32px 0px rgba(0, 0, 0, 0.08);
		&::after {
			height: 0 !important;
		}
		.wd-collapse-item__header {
			padding: 13px;
			
			&::after {
				background: #E5E5E5 !important;
				left: 13px !important;
				right: 13px !important;
				width: auto !important;
			}
			
			.wd-collapse-item__title {
				color: #23282C;
				font-size: 16px;
				font-weight: 600;
				line-height: 20px;
			}
			
			.wd-collapse-item__arrow {
				color: #b5b4b4;
			}
		}
		
		.wd-collapse-item__body {
			padding: 15px 15px 29px 15px;
		}
	}
}

.upload-box {
	padding-top: 12px;
	gap: 15px 17px;
	// display: grid;
	// grid-template-columns: repeat(3, minmax(0, 1fr));
	.wd-upload__preview, .upload-block {
		width: 100px;
		height: 100px;
		background-color: #F8F8F8;
		border-radius: 8px;
		margin: 0;
	}
	.upload-block {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.address-item {
	padding: 15px 0 !important;
}

.fixed-btn {
	// position: fixed;
	position: sticky;
	bottom: 0;
	// left: 0;
	// right: 0;
	z-index: 2;
	box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.14);
	background-color: #fff;
	padding: 15px 26px;

	.total-money {
		padding: 20px 0 23px 0;
		font-size: 26px;
		font-weight: 400;
		line-height: 28px;
		color: $uni-tabbar-color;
		font-family: Source Han Sans CN;
	}
	.btn-order {
		background-color: $uni-main-color;
		border-radius: 8px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		&:active {
			background-color: rgba($uni-main-color, 0.9)
		}
	}
}

.details-list {
	.details-item {
		color: #000;
		& +.details-item {
			padding-top: 11px;
		}
		.category-name {
			color: #989898;
			font-size: 14px;
			line-height: 18px;
		}
		
		.child-info {
			padding-top: 3px;
			font-size: 16px;
			line-height: 20px;
			.name {
				font-weight: 500;
			}
			
			.price {
				flex-shrink: 0;
			}
		}
		
		.check-card {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			min-width: 0;
			// padding: 6px 0 5px 0;
			padding-top: 6px;
			.icon {
				flex-shrink: 0;
				width: 12px;
				height: 12px;
				
				&.select {
					height: 10px;
				}
			}
			
			.text {
				padding-left: 3px;
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
			}
		}
	}
}

.card-box {
	border-radius: 8px;
	box-shadow: 0px 5px 32px 0px rgba(0, 0, 0, 0.08);
	background-color: #fff;
	padding: 10px 15px 13px 15px;
	& + .card-box {
		margin-top: 16px;
	}

	.card-title {
		color: #23282C;
		padding-bottom: 10px;
		border-bottom: 1px solid #E5E5E5;
	}
}

.picker-input {
	background-color: #F8F8F8;
	color: #989898;
	padding: 10px 11px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 400;
	display: flex;
	justify-content: space-between;
	align-items: center;
	&.no-display {
		display: none;
	}
	.select {
		color: #23282C;
	}
	
	.btn-add {
		color: $uni-main-color;
		font-size: 12px;
	}
}

.input-style {
	background: #F8F8F8 !important;
	padding: 10px 11px;
	border-radius: 8px;
	.wd-input__inner {
		font-size: 16px !important;
		font-weight: 400;
		color: #23282C !important;
	}
	input::-webkit-input-placeholder, input::-moz-placeholder {
		color: #989898 !important;
		font-size: 16px !important;
	}
	input::placeholder {
		color: #989898 !important;
		font-size: 16px !important;
	}
	.wd-input__placeholder {
		color: #989898 !important;
		font-size: 16px !important;
	}
}

.card-item {
	background-color: #fff;
	box-shadow: 0px 8px 10px 0px rgba(241, 244, 249, 1);
	border-radius: 8px;
	& + .card-item {
		margin-top: 24px;
	}
}

.cell-item {
	background-color: #fff;
	border-radius: 8px;
	display: flex;
	min-width: 0;
	align-items: center;
	font-size: 14px;
	line-height: 20px;
	color: #989898;
	padding: 16px;
	position: relative;
	
	&.shadow {
		box-shadow: 0px 8px 10px 0px rgba(241, 244, 249, 1);
	}
	
	&.border {
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 16px;
			right: 16px;
			height: 1px;
			background-color: #E6E6E6;
		}
	}

	& + .cell-item {
		margin-top: 24px;
	}
	
	&_label {
		flex-shrink: 0;
		padding-right: 22px;
	}
	
	.cell-item_center {
		flex: 1;
		font-size: 14px;
		color: #23282C;
		font-weight: 500;
		.wd-input__inner {
			color: #23282C;
			font-weight: 500;
		}
	}
	
	&_right {
		flex-shrink: 0;
		display: flex;
	}
}
// 加入关系弹窗
.break-popup {
  left: 23px !important;
  right: 23px !important;
  transform: translate3d(0, -50%, 0) !important;
  .popup-view {
	padding: 13px 16px 10px 16px;
	text-align: center;
	.title {
	  padding-bottom: 11px;
	  border-bottom: 1px solid #e5e5e5;
	  font-size: 18px;
	  font-weight: 700;
	  line-height: 22px;
	}

	.popup-content {
	  padding-top: 30px;
	  .content {
		font-size: 16px;
		font-weight: 500;
	  }

	  .popup-btns {
		padding-top: 35px;
		display: flex;
		justify-content: space-between;

		&-item {
		  width: 133px;
		  text-align: center;
		  color: #fff;
		  font-size: 18px;
		  font-weight: 700;
		  height: 40px;
		  line-height: 40px;
		  border-radius: 8px;

		  &:first-child {
			background-color: $uni-main-color;
		  }

		  &:last-child {
			background-color: #58618e;
		  }

		  &:active {
			opacity: 0.9;
		  }
		}
	  }

	  .tips-block {
		padding-top: 11px;
		color: $uni-tabbar-color;
		font-size: 12px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon {
		  width: 15px;
		  height: 13px;
		}

		.text {
		  padding-left: 3px;
		}
	  }
	}
  }
}

.fab-fixed {
	position: fixed;
	right: 0;
	width: 65px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	background-color: #fff;
	border-radius: 16px 0 0 16px;
	box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.1);
	border: 0;
	z-index: 1;
	&::after {
		border: none;
	}
	
	.icon {
		width: 26px;
		height: 26px;
	}
}
